<template>
    <div class="home">


        <div class="head-control" :style="{backgroundColor:'rgba(0,214,192,'+topBg+')'}">
            <div class="search">
                <img src="./image/search.png" alt="">
                <input type="text" placeholder="搜索感兴趣的商品" v-model="searchValue">
                <div class="search-btn" @click.stop="search()">搜索</div>
            </div>
            <div class="btn_cell" @click.stop="turn('/cart')">
                <img src="./image/cart.png" alt="">
            </div>
            <div @click="goMyAnswer('/myAnswer')" class="btn_cell">
                <img src="./image/msg.png" alt="">
            </div>
        </div>

        <cube-scroll
                class="side_scroll"
                ref="sideScroll"
                :scroll-events="['scroll']"
                @scroll="mainScroll"
                :data="homeData.agentTypeList"
                @pulling-up="refreshScroll()"
                :options="options">
          <!--幻灯片-->
            <div class="banner" >
                <cube-slide :data="homeData.bannerList" ref="slide" :interval="5000">
                    <cube-slide-item v-for="(item, index) in homeData.bannerList" :key="item.id">
                        <a><img  class="banner_img" :src="imgH+item.img" @click="toPage(item.url)"></a>
                    </cube-slide-item>
                </cube-slide>
            </div>
          <!--售卖类型-->
            <div class="menu_bar"  >
                <cube-scroll
                        ref="scrollH"
                        direction="horizontal"
                        :scroll-events="['scroll']"
                        @scroll="menubarScroll"
                        class="horizontal-scroll-list-wrap">
                  <div class="shadow">
                    <ul class="list-wrapper" ref="scrollContent">
                        <li class="list-item" v-for="(item,index) in homeData.saleTypeList" ref="listItem" :key="index">
                            <div class="cell"   @click="toMenu(item.id)">
                                <img :src="imgH+item.img" alt="">
                                <div class="desc">{{item.name}}</div>
                            </div>
                        </li>
                    </ul>
                  </div>
                </cube-scroll>
<!--                <div class="tips">-->
<!--                    <div :style="{width:tipsWidth+'px',marginLeft:tipsMargin+'px'}"></div>-->
<!--                </div>-->
            </div>

<!--          &lt;!&ndash;生活精品&ndash;&gt;-->
<!--          <div class="live-goods-wrapper">-->
<!--            <div class="live_goods" style="margin-top: 0;" >-->
<!--                <div class="go" @click="turn('/goodslist?saletype=0')"></div>-->
<!--                <div class="date" >-->
<!--                  <template v-if="config&&time">-->
<!--                  <span class="name">距离结束</span><div class="time">{{time.d}}</div><span class="name">天</span><div class="time">{{time.h}}</div><span class="name">时</span><div class="time">{{time.m}}</div><span class="name">分</span><div class="time">{{time.s}}</div><span class="name">秒</span>-->
<!--                  </template>-->
<!--                  <template v-else>-->
<!--                    <span class="name">距离结束</span><div class="time">{{0}}</div><span class="name">天</span><div class="time">{{0}}</div><span class="name">时</span><div class="time">{{0}}</div><span class="name">分</span><div class="time">{{0}}</div><span class="name">秒</span>-->
<!--                  </template>-->
<!--                </div>-->
<!--                <div class="content" >-->
<!--                  <threeSlide :list="homeData.liveGoodsList"></threeSlide>-->
<!--                </div>-->
<!--            </div>-->
<!--          </div>-->


<!--          &lt;!&ndash;健康优选&ndash;&gt;-->
<!--          <div class="daily-select-wrapper">-->
<!--          <div class="daily_select" style="margin-top: 0;" >-->
<!--            <div class="title" @click="turn('/goodslist?saletype=6')">-->
<!--              <div class="left">-->
<!--                <span class="icon"></span>-->
<!--                <span class="name">健康优选</span>-->
<!--                <span class="desc">优选好货</span>-->
<!--              </div>-->
<!--              <div class="more">-->
<!--                <span class="name">查看更多</span>-->
<!--                <span class="icon"></span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="content" >-->
<!--              <threeSlide :type="1" :list="homeData.dayGoodsList"></threeSlide>-->
<!--            </div>-->
<!--          </div>-->
<!--          </div>-->


          <!--代理列表-->
          <div class="goods_list" >
            <div class="list_title">
              <img src="./image/listSquar.png" alt="">
              <div class="name">品牌代理</div>
              <img src="./image/listSquar.png" alt="">
            </div>
            <div class="content">
              <two-list :list="homeData.agentTypeList">
                <template v-slot="scope">
                <goods-item :home="true" :item="scope.item"></goods-item>
                </template>
              </two-list>
            </div>
         </div>

        </cube-scroll>

      <img v-if="lotteryFlag" class="lottery" src="./image/lottery.gif" @click="turn('/lottery/detail')">
    </div>
</template>

<script>
    import {getHome,getGoods} from "@/api/home"
    import threeSlide from '@/components/three-slide'
    import twoList from '@/components/two-list/two-list'
    import goodsItem from '@/components/goods-item'
    import {parseTime,str2Date} from "@/common/js/time";
    import {config} from "@/util/wx";
    export default {
        name: "home",
        components:{threeSlide,twoList,goodsItem},
        data() {
            return {
                config:null,
                tipsWidth: 0,
                tipsMargin: 0,
                maxScroll: 0,
                time:null,
                boutiqueWidth: 0,
                boutiqueMargin: 0,
                boutiqueMaxScroll: 0,

                topBg: 0,
                options: {pullUpLoad: true},
                homeData: {
                  bannerList: [],
                  liveGoodsList:[],
                  dayGoodsList:[],
                  saleTypeList:[],
                  agentTypeList:[]
                },
                imgH: process.env.VUE_APP_IMG_DOMAIN,
                lotteryFlag: false,
                tabBarList: [],
                homeList: [],
                headGoodsList: [],
                tabBarSelect: 0,

                menubarList:[],
                searchValue:'',
                showTabBar:false,
                dailyList:[],
                storeList:[],

                page:1,
                size:10,
                tabId:null,
                leftTopList:[],
                rightTopList:[],
                flag:true,
            }
        },
        activated() {
          getHome().then(res => {
            this.homeData.bannerList = res.extra.bannerList
            this.homeData.saleTypeList = res.extra.saleTypeList.filter(res=>res.id!=7)
            this.homeData.dayGoodsList = res.extra.dayGoodsList
            this.homeData.liveGoodsList = res.extra.liveGoodsList
            this.config = res.extra.config
            this.lotteryFlag = res.extra.lotteryFlag
            this.downTime()
          })
          this.getGoods()
        },
        methods: {
          calTime(startDate,endDate){
            let now = new Date()
            //开始了
            if(now.getTime()>=startDate.getTime()){
              let leftTime = endDate.getTime() - now
              if(leftTime<0){leftTime = 0}
              let d = Math.floor(leftTime/(1000*60*60*24)) //计算天数
              let h = Math.floor(leftTime/(1000*60*60)%24) //计算小时数
              let m   = Math.floor(leftTime/(1000*60)%60)  //计算分钟数
              let s  = Math.floor(leftTime/1000%60);  //计算秒数
              this.time = {d,h,m,s}
            }
          },
          downTime(){//是爱
            if(this.config){
              let startDate = str2Date(this.config.startTime)
              let endDate = str2Date(this.config.endTime)
              if(!this.inter){
               this.inter = setInterval(()=>this.calTime(startDate,endDate),1000);
              }
            }
          },
          getGoods(){
            getGoods(1,this.page,this.size).then(res => {
              if(res.data.length>0){
                this.homeData.agentTypeList = this.homeData.agentTypeList.concat(res.data)
                this.page++
              }
            })
          },
            menubarScroll(e) {
                let x = -e.x
                let tipsLast = 46 - this.tipsWidth
                if (x >= 0 && x <= this.maxScroll) {
                    this.tipsMargin = -(e.x / this.maxScroll) * tipsLast
                }
            },
            boutiqueScroll(e) {
                let x = -e.x
                let tipsLast = 46 - this.boutiqueWidth
                if (x >= 0 && x <= this.boutiqueMaxScroll) {
                    this.boutiqueMargin = -(e.x / this.boutiqueMaxScroll) * tipsLast
                }
            },
            mainScroll(e) {
                let y = -e.y
                if (y >= 0 && y <= 200) {
                    this.topBg = y / 200
                }
                if (y>=150){
                    this.showTabBar = true
                }else {
                    this.showTabBar = false
                }
                if (this.tabBarSelect){
                    this.topBg = 1
                }
            },
            goMyAnswer(path){
              this.$router.push(path)
            },
            search(){

                if(this.searchValue==''){
                    return
                }
                this.$router.push({
                    path:`/goodslist?name=${this.searchValue}&ways=search`
                })
            },
            tabScroll(e){
                if (this.showTabBar){
                    this.$refs.scrollTabBar.scrollTo(e.x,0,100)
                }

            },
            tabBarScroll(e){
                if (!this.showTabBar){
                    this.$refs.scrollTab.scrollTo(e.x,0,100)
                }
            },
            refreshScroll(){
                this.getGoods()
            },
            turn(path){
                this.$router.push({
                    path
                })
            },
            toPage(url){
                // let link = id
                // if (!id){
                //     link = 1
                // }
                // this.$router.push({
                //     path:'/goodslist?type=0&saletype='+link
                // })
              if(url){
                // window.location.href = url
                // /goodslist?saletype=6
                this.$router.push(url)
              }
            },
            toMenu(path){
                this.$router.push({
                    path:`/goodslist?saletype=${path}`
                })
            }

        }
    }
</script>

<style scoped lang="stylus">
    .home
        background url("./image/bg.png") no-repeat
        background-size 100% 148px
        height 100%
        background-color #F9F9F9
        .head-control
            display flex
            z-index: 998;
            padding 9px 12px
            width calc(100% - 24px)

            .search
                display flex
                height 32px
                border-radius 30px
                align-items center
                background-color: #fff
                padding-left 5.5px
                /*flex 1*/
                width 273px
                img
                    width 20px
                    height 20px

                .search-btn
                    width 59px
                    height 32px
                    line-height 32px
                    text-align center
                    background-color: #defefb
                    color #00d6c0
                    font-size 14px
                    border-radius 16px

                input
                    flex 1
                    margin 0 8px
                    outline none
                    font-size 14px
                input:

                :-webkit-input-placeholder
                    color #999
                    opacity 0.5

                input:-moz-placeholder
                    color #999
                    opacity 0.5
                input:

                :-moz-placeholder
                    color #999
                    opacity 0.5

                input:-ms-input-placeholder
                    color #999
                    opacity 0.5

            .btn_cell
                width 32px
                height: 32px
                border-radius 50%
                background-color: rgba(51, 51, 51, 0.25);
                display flex
                justify-content center
                align-items center
                margin-left 7px

                img
                    width: 20px
                    height: 20px

        .banner
            position relative
            /*width 375px*/
            overflow hidden
            transform translateY(0)
            padding 9px 12px
            border-radius 10px
            overflow hidden
            .banner_img
                width 100%
                border-radius 10px
                height 155px

            /deep/ .cube-slide-dots
                bottom 10px
                text-align center
                padding 0

                > span
                    background-color: #FFFFFF;
                    opacity 1
                    width 5px
                    height 3px
                    border-radius 1.5px

                > span.active
                    background-color: #00D6C0

        .tab_bar
            width 100%
            background-color: #FFFFFF

            .horizontal-scroll-list-wrap
                height 39px

                /deep/ .cube-scroll-content
                    display: inline-block

                .list-wrapper
                    line-height: 39px
                    white-space: nowrap

                .list-item
                    display: inline-block
                    color #333
                    font-size 14px
                    padding 0 11px
                    position relative

                .selected
                    font-weight bold
                    font-size 17px

        .menu_bar
            text-align center
            background-color #FEFEFE
            width 100%
            .shadow
              padding 0px 12px 12px 9px
             .horizontal-scroll-list-wrap
                /deep/ .cube-scroll-content
                    display: inline-block
                    width 100%

                .list-wrapper
                    padding 0 7px
                    display flex
                    align-content center
                    justify-content space-between
                    background-color: #FFFFFF
                    box-shadow: 0px 1px 7px 0px rgba(17, 103, 94, 0.17);
                    border-radius 8px
                    white-space: nowrap
                    height: 104px;
                    overflow hidden

                .list-item
                    display: flex
                    align-content center
                    height 100%

                    > :first-child
                        margin-bottom 15px

                    .cell
                        display flex
                        flex-direction column
                        justify-content center
                        align-items center

                        img
                            width: 52px
                            height: 52px

                        .desc
                            font-size 12px
                            color #333
                            margin-top 0.133rem

            .tips
                width 46px
                background-color: #f4f3f3
                height 3px
                border-radius 1.5px
                margin 0 auto
                margin-top 10px

                div
                    height 3px
                    background-color: #00d6c0

        .daily-select-wrapper
          background-color white
          padding 0 12px
          .daily_select
            padding 12px 8px
            box-shadow: 0px 1px 7px 0px rgba(255, 70, 74, 0.17);
            border-radius: 5px;
            background-color white
            .title
              display flex
              align-items center
              margin-bottom 16px
              .left
                flex 1
                display flex
                align-items center
                .icon
                  background url("./image/icon_sel.png") no-repeat
                  background-size 100% 100%
                  margin-right 6px
                  width  20px
                  height 20px
                  display inline-block
                .name
                  font-size: 15px;
                  font-family: PingFang SC;
                  color: #333333;
                  margin-right 12px
                .desc
                  background-color #FE4B38
                  font-size: 8px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
                  padding 3px 4px
                  line-height 8px
                  border-radius 2px
              .more
                display flex
                align-items center
                .name
                  font-size: 11px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #333333;
                  line-height 11px
                .icon
                  width  13px
                  height 13px
                  display inline-block
                  background url("./image/more.png") no-repeat
                  background-size 100% 100%

        .live-goods-wrapper
          background-color white
          .live_goods
              overflow hidden
              height 317px
              margin 0 auto
              border-radius 5px
              padding-bottom 12px
              background url("./image/go.png")
              background-size 100% 100%
              position relative
              .date
                margin-top 78px
                margin-left 20px
                display flex
                align-items center
                justify-content center
                .name
                  font-size: 11px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #FFFFFF;
                .time
                  margin 0 3px
                  padding 0 1px
                  display flex
                  align-items center
                  justify-content center
                  width: 13px;
                  height: 13px;
                  background: #FFFFFF;
                  font-size: 10px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #F83F3C;
              .go
                  width 60px
                  height 60px
                  background url("./image/morego.gif") no-repeat
                  background-size 100% 100%
                  position absolute
                  top 22px
                  right 24px
                  img
                      width: 21px
                      height: 21px

                  .title_name
                      color #333
                      font-size 15px
                      margin-left 3.5px
                      margin-right 9px
                      font-weight bold

                  .title_tag
                      flex 1
                      display flex
                      align-items center

                      span
                          background-color: #defefb
                          font-size 8px
                          color #00d6c0
                          padding 3px 4px

                  .title_more
                      font-size 12px
                      color #333
                  .more_img
                      width 10px
                      height 10px
                      margin-left 3px
                      margin-bottom 0.8px

              .content
                  margin-top 47px
                  padding  0 18px
                  padding-bottom 20px
                  .cube-slide
                      height 100%

                  .slide_item
                      display flex

                      img
                          width: 103px
                          height: 103px
                          margin-right 11.5px
                          margin-left 3px
                          object-fit:cover

                      .goods_detail
                          flex 1
                          border-radius 0.26rem

                          .goods_name
                              color #333
                              width 220px
                              font-size 15px
                              line-height 0.55rem
                              white-space: nowrap;
                              text-overflow: ellipsis;
                              overflow: hidden;
                              word-break: break-all;

                          .goods_desc
                              width 220px
                              margin-top 5px
                              font-size 10px
                              color #999
                              white-space: normal;
                              overflow: hidden;
                              text-overflow: ellipsis;
                              display: -webkit-box;
                              -webkit-box-orient: vertical;
                              -webkit-line-clamp: 2;

                          .goods_shop
                              display flex
                              justify-content space-between
                              align-items center
                              margin-top 20px

                              .goods_price

                                  .old
                                      font-size 12px
                                      color #c8c8c8
                                      text-decoration: line-through
                                  .new
                                      font-size 18px
                                      color #00d6c0

                              .buy
                                  width 61px
                                  height 27px
                                  background-color: #00d6c0
                                  color #FFFFFF
                                  font-size 14px
                                  text-align center
                                  line-height 27px
                                  border-radius 7px 0 7px 0
        .boutique
            width 351px
            margin 0 auto
            background-color: #fff
            margin-top 9px
            border-radius 5px
            padding-bottom 15px

            .title
                display flex
                padding 11px 3.5px 11px 5.5px
                justify-content space-between
                align-items center

                img
                    width: 21px
                    height: 21px

                .title_name
                    color #333
                    font-size 15px
                    margin-left 3.5px
                    margin-right 9px
                    font-weight bold

                .title_tag
                    flex 1
                    display flex
                    align-items center

                    span
                        background-color: #defefb
                        font-size 8px
                        color #00d6c0
                        padding 3px 4px

                .title_more
                    font-size 12px
                    color #333
                .more_img
                    width 10px
                    height 10px
                    margin-left 3px
                    margin-bottom 0.8px

            .boutique_scroll
                /deep/ .cube-scroll-content
                    display: inline-block

                .list-wrapper
                    white-space: nowrap
                    padding 0 10.5px

                .list-item
                    display: inline-block
                    margin-right 5px
                    width: 97px
                    height: 143px
                    background-color: #f4f3f3

                    .goods_img
                        width: 97px
                        height: 97px
                        object-fit:cover

                    .goods_detail
                        padding 0 10px 0 6.5px

                    .goods_name
                        width 80px
                        color #333
                        font-size 12px
                        line-height 0.55rem
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        word-break: break-all;

                    .bottom
                        display flex
                        justify-content space-between
                        align-items center

                        .price
                            color #00d6c0
                            font-size 15px

                        img
                            width: 16px
                            height: 16px

            .tips
                width 46px
                background-color: #f4f3f3
                height 3px
                border-radius 1.5px
                margin 0 auto
                margin-top 10px
                div
                    height 3px
                    background-color: #00d6c0
        .goods_list
            margin-top 20px
            padding 0 11px
            .list_title
                display flex
                justify-content center
                align-items center
                margin-bottom 20px
                img
                    width: 11px
                    height: 11px
                .name
                    color #333
                    font-size 15px
                    font-weight bold
                    margin 0 9px
            .content
              padding-bottom 40px
        .lottery
            position fixed
            z-index 898
            width: 117px
            height 100px
            right 0
            bottom 64px

</style>
